<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
<!--    <title>图书管理系统-登录页面</title>-->
    <title>BOOK-LOGIN</title>

    <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon"/>

    <!-- easyui 引入所需的 css -->
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">    <!-- 皮肤 -->
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="wu/css/icon.css">

    <!-- 引入所需的 js，注意先后顺序 -->
    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/easyui-lang-zh_CN.js"></script>

    <!-- 判断是否在线 -->
    <script type="text/javascript" src="js/is-online.js"></script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: rgb(128, 128, 128);
            text-align: center;
        }

        a:link, a:hover, a:visited, a:active {
            color: rgb(128, 128, 128);
            text-decoration: none;
        }

        form {
            width: 400px;
            min-width: 400px;
            /*控制位置*/
            position: absolute; left: 0; right: 0; top: 15%; margin: auto;
            padding: 30px;
            background-color: white;
            border: 2px solid rgba(128, 128, 128, 0.2);
            border-radius: 10px;
        }

        form div {
            margin-bottom: 10px;
        }
    </style>
</head>

<body style="background-image:url(images/login.jpg)">

<div>

    <div style="width:85px;height:55px;border:1px solid #ccc;
            position: absolute; right:0; top: 5%; margin: auto;
            padding: 10px;
            background-color: white;border-radius: 10px;">
        <a href="/" class="easyui-linkbutton" data-options="iconCls:'icon-book-go'" style="width:65px">首页</a>
    </div>

    <form action="/login" method="post">
        <div>
            <h1>用户登录</h1>
        </div>
        <div>
            <input class="easyui-textbox" name="username" id="ums_username"
                   data-options="iconCls:'icon-man',iconWidth:30,iconAlign:'left',prompt:'用户名'"
                   style="width:100%;height:35px;"/>
        </div>
        <div>
            <input class="easyui-passwordbox" name="password"
                   data-options="iconWidth:30,iconAlign:'left',prompt:'密码'"
                   style="width:100%;height:35px;"/>
        </div>
        <!--
        <div>
            <input class="easyui-checkbox" label="记住密码" labelPosition="after" labelWidth="70" />
        </div>
        -->
        <div>
            <input class="easyui-linkbutton" type="submit" value="登陆" style="width:100%;height:35px;"/>
        </div>

        <!--        登录错误显示-->
        <h4 style="color: red" th:if="${session.msg}" th:text="${session.msg}"></h4>

        <!--
        <div>
            <div style="display:inline;">
                <a href="javascript:void(0)">还未注册？</a>
            </div>
            <div style="display:inline;margin-left:170px;">
                <a href="javascript:void(0)">忘记密码？</a>
            </div>
        </div>
        -->
    </form>
</div>
</body>

<script type="text/javascript">
    $(function () {
        $('#ums_username').textbox('textbox').focus();
    })
</script>
</html>